import { PROJECT_PREFIX } from '../../types/constants'
import { StylesService } from '../../types/constants/styles'
import { DEFAULT_TEXT_INPUT_PROPS } from './types'

export function styles(): string {
  const padding = '6px 12px'
  const fontSize = '14px'

  return `
    .custom-text-input {
      input, textarea {
        all: initial;
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        padding: ${padding} !important;
        font-size: ${fontSize} !important;
        border: 1px solid var(--${PROJECT_PREFIX}-theme-border-neutral) !important;
        border-radius: 4px !important;
        ${StylesService.getInstance().wordBreak.default}
        ${StylesService.getInstance().scroll.default}
        
        &:hover {
          border-color: var(--${PROJECT_PREFIX}-theme-border-active) !important;
        }
        
        &:focus {
          outline: none !important;
        }
        
        &::placeholder {
          color: #6c757d !important;
          opacity: 1 !important;
        }
      }
      
      input {
        color: var(--${PROJECT_PREFIX}-theme-text-text) !important;
        background-color: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
      }
      
      textarea {
        min-height: calc(${fontSize} * ${(DEFAULT_TEXT_INPUT_PROPS.rows || 3) + 1}) !important;
        resize: vertical !important;
        color: var(--${PROJECT_PREFIX}-theme-textarea-text) !important;
      }
      
      input[type="file"] {
        padding: ${padding} !important;
        background-color: #f8f9fa !important;
        
        &::file-selector-button {
          padding: ${padding} !important;
          margin-right: 10px !important;
          border: 1px solid var(--${PROJECT_PREFIX}-theme-border-secondary) !important;
          border-radius: 4px !important;
          background-color: #e9ecef !important;
          cursor: pointer !important;
          transition: all 0.2s ease !important;
          
          &:hover {
            background-color: #dee2e6 !important;
          }
        }
      }
      
      input[type="password"] {
        letter-spacing: 1px !important;
      }
    }
  `
}
